<template>
<div class="container">
    <el-card>
        <div slot="header" class="clearfix">
            <span>安全文档日志</span>
        </div>
        <div>
            <el-form :inline="true" :model="queryList" class="demo-form-inline">
                <el-form-item label="文档名称">
                    <el-input v-model="queryList.condition.documentName" placeholder="请输入文档名称" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="操作时间">
                    <DatePicker :date.sync="queryList.condition.date"/>
                </el-form-item>
                <el-form-item label="操作用户">
                    <!-- <NameTree :value.sync="queryList.condition.username"/> -->
                     <el-input
                        v-model="queryList.condition.username"
                        placeholder="请选择操作用户"
                        style="width: 240px;"
                        readonly
                        @focus="nameTreeData = {visible: true, value: ''}"></el-input>
                </el-form-item>
                <el-form-item label="操作类型">
                    <Seletion :data="hanlderTypes" :checks.sync="queryList.condition.checks"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
             <div style="text-align:right;">
                <el-button type="primary">导出</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                <el-table-column prop="id" label="日志ID" width="180"></el-table-column>
                <el-table-column prop="date" label="操作时间" width="180"></el-table-column>
                <el-table-column prop="username" label="操作用户"></el-table-column>
                <el-table-column prop="department" label="所属部门"></el-table-column>
                <el-table-column prop="documentName" label="文档名称"></el-table-column>
                <el-table-column label="操作类型">
                    <template slot-scope="scope">
                        <!-- <el-input></el-input> -->
                        <span>{{ filterHandler(scope.row.handleType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="deviceType" label="设备类型"></el-table-column>
                <el-table-column prop="mac" label="MAC地址"></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="view(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination
                v-show="queryList.total > 0"
                :total="queryList.total"
                :limit.sync="queryList.pageSize"
                @pagination="pagination"/>

        </div>
    </el-card>

    <el-dialog title="日志详情"
        :visible.sync="visible"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
        @close="close"
        >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="日志ID">
                <el-input readonly v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="操作时间">
                <el-input readonly v-model="form.date"></el-input>
            </el-form-item>
            <el-form-item label="操作用户">
                <el-input readonly v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-input readonly v-model="form.department"></el-input>
            </el-form-item>
            <el-form-item label="文档名称">
                <el-input readonly v-model="form.documentName"></el-input>
            </el-form-item>
            <el-form-item label="操作类型">
                <el-input readonly v-model="form.handleType"></el-input>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-input readonly v-model="form.deviceType"></el-input>
            </el-form-item>
            <el-form-item label="MAC地址">
                <el-input readonly v-model="form.mac"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="close">确 定</el-button>
        </div>
    </el-dialog>
    <NameTreeDialog
        v-bind.sync="nameTreeData"/>
</div>
</template>

<script>
import { list } from '@/api/logApi'
import { queryParams } from '@/assets/mixins'
import Pagination from '@/components/Pagination'
import DatePicker from '@/components/DatePicker'
import Seletion from '@/components/Seletion'
import NameTreeDialog from '@/components/NameTreeDialog'
export default {
    name: 'LogPage',
    mixins: [queryParams],
    components: {
        Pagination,
        Seletion,
        DatePicker,
        NameTreeDialog
    },
    created () {
        // 初始化搜索参数
        this.queryList.condition = {
            documentName: '',
            username: '',
            checks: [],
            date: []
        }
        this.initData()
    },
    data () {
        return {
            tableData: [],
            loading: true,
            visible: false,
            form: {},
            nameTreeDialogVisible: false,
            nameTreeData: {
                visible: false,
                value: ''
            },
            checkbox: false,
            hanlderTypes: [
                { label: '全部', value: '' },
                { label: '阅读', value: '1' },
                { label: '复制', value: '2' },
                { label: '打印', value: '3' },
                { label: '导出', value: '4' },
                { label: '创建', value: '5' },
                { label: '注释', value: '6' },
                { label: '编辑', value: '7' },
                { label: '另存', value: '8' },
                { label: '文档水印', value: '9' },
                { label: '添加印章', value: '10' },
                { label: '撤销印章', value: '11' },
                { label: '签章脱密', value: '12' },
                { label: '修改权限', value: '13' },
                { label: '制作外发', value: '14' },
                { label: '外发授权', value: '15' }
            ]
        }
    },
    methods: {
        cascaderHander (node, data) {
            console.log(node, data)
        },
        initData () {
            this.loading = true
            setTimeout(() => {
                const { data } = list()
                this.tableData = data
                this.queryList.total = data.length
                this.loading = false
            }, 1000)
        },
        view (row) {
            this.form = row
            this.visible = true
        },
        pagination (pagination) {
            console.log(pagination)
        },
        close () {
            this.form = {}
            this.visible = false
        },
        search () {
            console.log('搜搜')
        },
        hanlderTypeChange (types) {
            this.queryList.condition.hanlderTypes = types.join(',')
        },
        filterHandler (val) {
            const type = this.hanlderTypes.filter(item => Number(val) === Number(item.value))
            if (type.length) {
                return type[0].label
            } else {
                return '未知操作'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.pagination {
    margin: 10px;
}
</style>
